
<!-- 列表界面 -->
<div id="data-list">
	<div class="banner hidetree">
		<span class="base-blue-01 base-search iconfont icon-chazhaobiaodanliebiao" data-title='字典列表'>字典列表查询</span>
	</div>
	<div class="base-form">
		<form id="fa-search">
			<table class="base-table form search">
				<tr>
					<td class="td-bg" width="150">字典名称</td>
					<td class="left padding-l">
						<input	class="base-input"  id="name">
					</td>
					<td class="td-bg" width="150">上级字典名称</td>
					<td class="left padding-l">
						<input	class="base-input pName"  id="pName" autocomplete="off">
						<ul class="ztree ztree-position"></ul>
					</td>
					<td class="center" rowspan="1" width="150">
						<button id="btn_search" type="button" class="base-btn base-bg-green" data-toggle="modal">查询</button>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div class="banner hidetree">
		<span class="base-blue-01 base-search iconfont icon-chazhaobiaodanliebiao">字典列表</span>
		<shiro:hasPermission name="sysDict:saveDict">
			<div id="toolbar" class="toolbar">
				<button id="btn_add" type="button" class="base-btn base-bg-blue" data-toggle="modal">新增</button>
			</div>
		</shiro:hasPermission>
	</div>
	<div id="list">
		<table class="list-table base-table">
			<thead>
			<tr>
				<th width="60">序号</th>
				<th width="150">字典名称</th>
				<th width="110">上级字典名称</th>
				<th width="60">状态</th>
				<th>描述</th>
				<th width="100">操作</th>
			</tr>
			</thead>
			<tbody id="datalist">

			</tbody>
			<script id="tradecent-template" type="text/x-handlebars-template">
				{{#each this}}
				<tr>
					<td><div class='base-wrap'>{{addOne @index}}</div></td>
					<td><div class='base-wrap left'>{{name}}</div></td>
					<td><div class='base-wrap left'>{{isNull parentDict.name}}</div></td>
					<td><div class='base-wrap'>{{status}}</div></td>
					<td><div class='base-wrap'>{{remark}}</div></td>
					<td>
						<shiro:hasPermission name="sysDict:updateDict"><span class="oper-handle iconfont icon-bianji base-yellow update" title='修改字典' data-pkid={{dictId}}></span></shiro:hasPermission>
						<shiro:hasPermission name="sysDict:deleteDict"><span class="oper-handle iconfont icon-shanchu base-red delete" title='删除字典' data-pkid={{dictId}}></span></shiro:hasPermission>
					</td>
				</tr>
				{{/each}}
			</script>
		</table>
	</div>
</div>
<!-- end列表界面 -->

<!-- 新增与详情页面 -->
<div id="data-form"  data-title='新增字典'>
	<form id="form">
		<input type='hidden' name='dictId'>
		<table class="base-table form">
			<tr>
				<td class="td-bg" width="150">上级字典</td>
				<td class="left">
					<input class="base-input pName" name='parentDictPname' data-id="name" readonly="readonly">
					<ul class="ztree ztree-position"></ul>
					<input name='parentDictid' class="pDictId" type="hidden"  data-id="dictId">
				</td>
				<td class="td-bg hidetree" width="150">字典名称</td>
				<td class="left"><input name="name"
										class="base-input validate require hidetree" data-exp="w{2-20}"></td>
			</tr>
			<tr>
				<td width="150" class="hidetree">状态</td>
				<td>
					<select class="base-select validate require"  name="status">
						<option value="可用">可用</option>
						<option value="不可用">不可用</option>
					</select>
				</td>
				<td width="150">是否打开叶子节点</td>
				<td>
					<select class="base-select validate require"  name="isOpen">
						<option value="false">否</option>
						<option value="true">是</option>
					</select>
				</td>
			</tr>
			<tr>
				<td width="150" >描述</td>
				<td colspan="3">
					<textarea class="base-textarea" name="remark"></textarea>
				</td>
			</tr>
		</table>
	</form>
	<div id="toolbar" class="toolbar buttom-btn fixed_pos">
		<button id="btn_back" type="button" class="base-btn base-bg-yellow">
			返回</button>
		<button id="btn_save" type="button" class="base-btn base-bg-blue">
			保存</button>
	</div>
</div>
<!--end新增与详情页面-->
<script type="text/javascript">
    $(function() {
        $.baseEvent({
            ctx:'',
            param:['name','pName'],
            isPage:true,
            pageList_url:"/sysDict/pageList",
            form_url:'/sysDict/saveDict',
            data_list:'/route/sys/sys_dictList',
            del_url:'/sysDict/delDict',
            findBy_url:'/sysDict/findDict',
            add_is_dialog:true
        });

        $('.ztree').getNiceScrolls({selected:[{".ztree":400}]})
        //getDept();//上级字典
        $(".pName").on('click',function(){
            var $_this = $(this),
                $ztree = $_this.next();
            $ztree.show();
            $.fn.zTree.init($ztree, setting);

        });

        //隐藏tree
        $('.hidetree').click(function(){
            $(".pName").next().hide();
        });
    });

    function getDept() {
        var my = {
            url : "/sysDict/findTopList",
            type:'get',
            callback : function(res) {
                for (var i = 0; i < res.data.length; i++) {
                    $("#pId").append(
                        "<option value='"+res.data[i].dictId+"'>"
                        + res.data[i].name + "</option>");
                }
            }
        }
        $._NormalRequest(my);
    }

    /**************************ztree************************************/
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            selectedMulti: false
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "dict_id",
                pIdKey: "pid",
                rootPId: ""
            },
            key: {
                title: "name",
                name: "name"
            },
        },
        async: { //ztree异步请求数据 
            enable: true,
            dataFilter: ajaxDataFilter, //预处理数据
            url: "/sysDict/findAll", //请求action方法
            type:'get',
            autoparam: ["data"]
        },
        callback: {
            beforeClick: beforeClick
        }
    };
    /* 获取返回的数据，进行预操作 */
    function ajaxDataFilter(treeId, parentNode, responseData) {
        debugger;
        responseData = responseData.data;
        return responseData;
    };
    //异步加载完成时运行，此方法将所有的节点打开
    function zTreeOnAsyncSuccess(event, treeId, msg) {
        //var treeObj = $.fn.zTree.getZTreeObj("tree");
        var treeObj = $.fn.zTree.getZTreeObj($(".ztree"));
        treeObj.expandAll(true);
        //详情界面
        var my = {
            url: "/sysRole/findAuthority",
            type:'get',
            para: {
                "roleId": $("input[name='roleId']").val()
            },
            callback: function(res) {
                res.data.memus.map(function(v, i) {
                    var node = treeObj.getNodeByParam("dictId", v.dictId);
                    treeObj.checkNode(node, true, true);
                    treeObj.updateNode(node);
                })
            }
        }
        $._NormalRequest(my);
    }

    function beforeClick(treeId, treeNode) {
        var pDictId = $(".pDictId");
        pDictId.val(treeNode.dict_id);
        $(".pName").val(treeNode.name);
        //$("#"+treeId).hide();
        $(".ztree").hide();
        var dictId = $("input[name='dictId']").val();
        if(pDictId.val() && pDictId.val()==dictId){
            pDictId.val("");
            $(".pName").val("");
            layer.tips('上级字典和本级字典不能一样,请重新选择上级字典', "input[name='parentDictPname']");
        }
        //var zTree = $.fn.zTree.getZTreeObj("tree");
        var zTree = $.fn.zTree.getZTreeObj($(".ztree"));
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    /*******************************************************************/
</script>
